<script setup lang='ts'>
import {reactive, ref, computed, PropType} from 'vue'
const emits = defineEmits(['suer'])
type directiontype='left'|'center'|'right'
const props = defineProps({
  //显示
  lineData:{
    type:Array,
    required:true
  },
  active:{
    type:Number, // 当前选中的位置
    required:true
  },
  direction:{ // 方向
    type:String as PropType<directiontype>,
    default:'center'
  },
  widthDiv:{ // div总宽度
    type:String,
    default:'110'
  }
})

const formData = computed(() => {
  return props.lineData
})
const activeIndex = computed(() => {
  return props.active
})
const onclick = (index:number) => {
  emits('suer', index)
}
</script>

<template>
  <div>
    <div class="timeLine" :style="{'justify-content':props.direction}">
      <div v-for="(item,index) in formData" :key="index" class="item" :style="{'width':props.widthDiv+'px'}" @click="onclick(index)">
        <div :id="index==0?'left-del':formData.length-1==index?'right-del':''" :class="activeIndex==index?'item-title left-active right':activeIndex>index?'item-title right-active left-active':'item-title left right'">
          <div :class="activeIndex>=index?'title-active':''">
            {{ index+1 }}
          </div>
        </div>
        <div :class="activeIndex>=index?'active item-text':'item-text'">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

.timeLine{
  width: 100%;
  display: flex;
  margin: 0 0 50px 0;
  .item{
    // width: 110px;
    cursor:pointer;
    .item-title{
      display: flex;
      justify-content: center;
      position: relative;
      div{
        width: 20px;
        height: 20px;
        color: #C5C8CE;
        opacity: 1;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        border: 1px solid #C5C8CE;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 999;
        background: #fff;
      }
    }
    .item-text{
      line-height: 19px;
      margin-top: 3px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #C5C8CE;
      text-align: center;
    }
  }
}
.title-active{
   background: #1C9399 !important;
   color: #FFFFFF !important;
   border: none !important;
}
.active{
  color: #1C9399 !important;
}
.left::after{
  content:'';
  width: 50%;
  height:1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  background: #C5C8CE;
}
.right::before{
  content:'';
  width: 50%;
  height:1px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
  background: #C5C8CE;
}
.left-active::after{
  content:'';
  width: 50%;
  height:1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  background: #1C9399;
}
.right-active::before{
  content:'';
  width: 50%;
  height:1px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
  background: #1C9399;
}

#left-del::after {
    content: none;
}
#right-del::before {
    content: none;
}
</style>